.lsg-color-swatch {
  @extend %lsg-reset;
  color: $lsg-color-swatch-color;
  cursor: pointer;
  float: left;
  font-family: $lsg-code-font-family;
  font-size: $lsg-code-font-size;
  height: 4em * $lsg-line-height;
  line-height: 1em * $lsg-line-height;
  list-style: none;
  margin: 0 $lsg-gutter $lsg-gutter 0;
  position: relative;
  text-align: center;
  transition: transform 0.2s;

  &:hover {
    z-index: 2;
  }

  &:active {
    transform: scale(0.9);
  }

  &::before {
    @extend %lsg-reset;
    border: {
      color: $lsg-color-swatch-border-color;
      radius: $lsg-color-swatch-border-radius;
      style: solid;
      width: $lsg-color-swatch-border-width;
    }
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  &:hover::before {
    background-image: $lsg-copy-background-image;
    background-position: 50% 40%;
    background-repeat: no-repeat;
    background-size: 20%;
    color: black;
    cursor: pointer;
  }

  &::after {
    display: none;
  }

  &.lsg-empty {
    cursor: default;
    overflow: hidden;
    text-align: left;
    text-indent: -119988px;

    &::before,
    &::after {
      display: none;
    }
  }
}

.lsg-color-swatch-source {
  @extend %lsg-reset;
  display: block;

  &:hover {
    text-decoration: underline;
  }
}

.lsg-color-swatch-value {
  @extend %lsg-reset;
  cursor: pointer;
  display: block;
  margin-top: 1em * $lsg-line-height;
  text-align: center;

  .lsg-color-swatch:hover & {
    text-decoration: underline;
  }

  .lsg-color-swatch-source + & {
    margin-top: 0;
  }

  .lsg-color-swatch-source:hover + & {
    text-decoration: none;
  }
}

// scss-lint:disable VendorPrefix
.lsg-color-swatches {
  @extend %lsg-reset;
  margin: (4 * $lsg-gutter) auto (-$lsg-gutter);
  max-width: $lsg-width + 2 * $lsg-gutter;
  padding-left: $lsg-gutter;
  -webkit-user-select: none;
  user-select: none;

  &::after {
    clear: both;
    content: "";
    display: table;
  }
}

@for $i from 1 through 12 {
  .lsg-color-swatches.lsg-#{$i}-columns .lsg-color-swatch {
    $size: floor(($lsg-width - ($i - 1) * $lsg-gutter) / $i);
    height: $size;
    padding-top: $size / 2 + ($size / 5 - 20px);
    width: $size;
  }
}

$lsg-colors: () !default;

@each $color-class, $value in $lsg-colors {
  $value: null !default;

  @if $value != null {
    .#{$color-class} {
      @if (lightness($value) < 50%) {
        @if (lightness($lsg-background-color) > lightness($lsg-color)) {
          color: $lsg-background-color;
        }
        @else {
          color: $lsg-color;
        }
      }
      @else {
        @if (lightness($lsg-background-color) > lightness($lsg-color)) {
          color: $lsg-color;
        }
        @else {
          color: $lsg-background-color;
        }
      }

      &::before {
        background-color: $value;
      }

      &::after {
        @extend %lsg-code !optional;
        content: "#{inspect($value)}";
      }
    }
  }
}
